<template>
    <div class="Allcomment">
        <div class="Nav">
            <van-icon name="arrow-left" @click="back" />
            <div class="title">
                评论<span>({{ AllCommentList.length }})</span>
            </div>
        </div>
        <div class="Content">
            <div class="Comment-item" v-for="(item, index) in AllCommentList" v-if="AllCommentList !== null">
                <!-- 上部分 -->
                <div class="Upper-part">
                    <!-- 头像 -->
                    <div class="img-box">
                        <img src="../assets/images/comment-user.png" class="img-auto" />
                    </div>
                    <!-- 用户昵称,等级,星数,时间 -->
                    <div class="user">
                        <div class="NickName-Estate">
                            <div class="NickName">{{ item.nickName }}</div>
                            <span :class="['level', 'iconfont', 'icon-level' + item.userLevel]"></span>
                        </div>
                        <!-- 星数 时间 -->
                        <div class="Star-time">
                            <van-rate v-model="item.grade" readonly size="15" color="#ffd21e" void-icon="star" void-color="#eee" style="margin-bottom: 5px" />
                            <div class="time">{{ getDateTime(item.time) }}</div>
                        </div>
                    </div>
                    <!-- 点赞 -->
                    <p class="likes">
                        <span class="likes_num">{{ item.likes }}</span>
                        <span class="iconfont icon-dianzan"> </span>
                    </p>
                </div>
                <!-- 下部分 -->
                <div class="Next-part">
                    {{ item.comment }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Allcomment",
    data() {
        return {
            AllCommentList: null,
        };
    },
    methods: {
        // 时间戳转换为yyyy年mm月dd日 hh时mm分
        getDateTime(value) {
            // 时间戳转换为当前地区的标准时间
            let time = new Date(value);
            // 自带的etFullYear方法可以将标准时间返回一个表示年份的 4 位数字
            let year = time.getFullYear();
            //getMonth()方法可将标准时间返回表示月份的数字。返回值是0(一月)到11(十二月)之间的一个整数。
            let month = time.getMonth() + 1;
            //getDate()可返回标准时间的月份的某一天
            let date = time.getDate();
            // .getHours()可返回标准时间的小时字段。
            let hour = time.getHours();
            //
            let minute = time.getMinutes();
            // let second = time.getSeconds();
            // 获取当前标准时间 判断获得的时间是否小于当前年份
            let currentTime = new Date();
            let currentYear = currentTime.getFullYear();
            month = month < 10 ? "0" + month : month;
            date = date < 10 ? "0" + date : date;
            hour = hour < 10 ? "0" + hour : hour;
            minute = minute < 10 ? "0" + minute : minute;
            if (year < currentYear) {
                let str = String(year) + "年" + String(month) + "月" + String(date) + "日" + " " + String(hour) + ":" + String(minute);

                return str;
            } else {
                let str = String(month) + "月" + String(date) + "日" + " " + String(hour) + ":" + String(minute);
                return str;
            }
        },
        back() {
            this.$router.back();
        },
    },
    created() {
        // 获取全部评论
        if (this.$route.query.AllCommentList) {
            this.AllCommentList = JSON.parse(this.$route.query.AllCommentList);
        }
    },
};
</script>

<style lang="less" scoped>
.Allcomment {
    .Content {
        height: calc(100% - 50px);
        width: 350px;
        margin: 0 auto;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
        }

        .Comment-item {
            margin: 20px 0 25px 0;
            .Next-part {
                padding: 0 49px;
                margin-top: 5px;
                font-size: 14px;
            }
            .Upper-part {
                width: 100%;
                display: flex;
                .img-box {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                }
                .likes {
                    margin: 6px 0 0 20px;
                    .likes_num {
                        font-size: 14px;
                        margin-right: 5px;
                        color: #9d9e9a;
                    }
                }
                .user {
                    margin: 0 0 0 15px;
                    .NickName-Estate {
                        display: flex;
                        align-items: center;
                        .NickName {
                            color: #8585ee;
                            font-size: 14px;
                        }
                        .level {
                            color: #f3574e;
                            font-size: 20px;
                            margin-left: 5px;
                        }
                    }
                    .Star-time {
                        width: 250px;
                        display: flex;
                        margin: 5px 0 0 0;
                        .time {
                            margin: -2px 0 0 10px;
                            color: gray;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
    .Nav {
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cdd9d9;
        .van-icon-arrow-left {
            font-size: 20px;
            margin: 0 125px 0 10px;
        }
        .title {
            font-size: 18px;
        }
    }
}
</style>
